<template>
  <div id="container">
    <div class="select">
      <el-select v-model="initTime" @change="selectChangeFn" class="m-2" placeholder="Select" size="large">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
    </div>
  </div>
</template>
<script setup>
import { ref, reactive } from 'vue'
import AMapLoader from '@amap/amap-jsapi-loader' // 使用加载器加载JSAPI，可以避免异步加载、重复加载等常见错误加载错误
import { shallowRef } from '@vue/reactivity'
import { onMounted } from '@vue/runtime-core'
import { getCoordinatePoint } from '@/api/seismicInformations.js'
import latestTtimeStamp from '@/utlis/latestTtimeStamp.js'
let map = shallowRef(null)
// 选择框数据
const options = reactive([
  {
    value: latestTtimeStamp(24 * 60 * 60 * 1000),
    label: '最近24小时内地震'
  },
  {
    value: latestTtimeStamp(24 * 60 * 60 * 2 * 1000),
    label: '最近48小时内地震'
  },
  {
    value: latestTtimeStamp(24 * 60 * 60 * 7 * 1000),
    label: '最近7天内地震'
  },
  {
    value: latestTtimeStamp(24 * 60 * 60 * 30 * 1000),
    label: '最近30天内地震'
  }
])
// 地图实列
const AMapRef = ref()
// 信息窗体实列
const infoWindowRef = ref()
// 返回的地震信息
let markerDataRes = reactive([])
// 选择框默认选择
const initTime = ref(options[0].value)
onMounted(() => {
  initMap()
})
// 初始化高德
const initMap = () => {
  AMapLoader.load({
    key: '87f306f3d86e16e03086ad59d31287a6', // 申请好的Web端开发者Key，首次调用 load 时必填
    version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: [''] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
  })
    .then(AMap => {
      AMapRef.value = AMap
      map = new AMap.Map('container', {
        //设置地图容器id
        viewMode: '3D', //是否为3D地图模式
        zoom: 2, //初始化地图级别
        center: [105.602725, 37.076636] //初始化地图中心点位置
      })
      // 信息窗体
      infoWindowRef.value = new AMap.InfoWindow({
        offset: new AMap.Pixel(0, -20)
      })
      getCoordinatePointFn(initTime.value)
    })
    .catch(e => {
      console.log(e)
    })
}
// 坐标
let addMarkerList = reactive([])
// 添加圆点标记
const addMarker = (markerData, AMap) => {
  map.remove(addMarkerList)
  addMarkerList = []
  for (let index = 0; index < markerData.length; index++) {
    const { longitude, latitude, location } = markerData[index]
    let marker = new AMap.Marker({
      position: new AMap.LngLat(longitude, latitude), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
      title: location
    })
    addMarkerList.push(marker)
  }
  map.add(addMarkerList)
}
// 信息窗体盒子
const contentBox = (longitude, latitude, location, earthquake_magnitude, depth, time) => `<div class="infoWinodBox">
      <div class="infoWinod">
        <div class="title">地震信息</div>
        <div class="box">
          <div class="li">参考位置：${location}</div>
          <div class="li">时间：${time}</div>
          <div class="li">经度：${longitude}</div>
          <div class="li">纬度：${latitude}</div>
          <div class="li">深度：${depth}千米</div>
          <div class="li">震级：${earthquake_magnitude}级</div>
        </div>
      </div>
    </div>`
// 添加圆点标记1
const addMarker1 = (markerData, AMap) => {
  map.clearMap()
  for (let index = 0; index < markerData.length; index++) {
    const { longitude, latitude, location, earthquake_magnitude, depth, time } = markerData[index]
    const center = [longitude, latitude]
    const color = [' #FF0000', '#FF7D00', '#FFFF00', '#0000FF']
    const circleMarker = new AMap.CircleMarker({
      center: center,
      // radius: 10 + Math.random() * 10, //3D视图下，CircleMarker半径不要超过64px
      radius: +earthquake_magnitude + 10,
      strokeColor: 'white',
      strokeWeight: 2,
      strokeOpacity: 0.5,
      fillColor: color[judgingColor(earthquake_magnitude)],
      fillOpacity: 0.5,
      zIndex: 10,
      bubble: true,
      cursor: 'pointer',
      clickable: true,
      title: location
    })
    circleMarker.content = contentBox(longitude, latitude, location, earthquake_magnitude, depth, time)
    //圆点标记的鼠标滑过事件
    circleMarker.on('mouseover', markerClick)
    circleMarker.emit('mouseover', { target: circleMarker })
    circleMarker.setMap(map)
  }
}

// 判断地震颜色
const judgingColor = earthquakeMagnitude => {
  const number = +earthquakeMagnitude.split('.')[0]
  if (number >= 7) {
    return 1
  } else if (number >= 5) {
    return 2
  } else if (number >= 3) {
    return 3
  }
  return 4
}
// 圆点标记的点击事件
const markerClick = e => {
  infoWindowRef.value.setContent(e.target.content)
  infoWindowRef.value.open(map, e.target.getCenter())
}
// 根据选择框获取数据
const getCoordinatePointFn = timestamp => {
  getCoordinatePoint(timestamp).then(res => {
    if (res.code === 200) {
      markerDataRes = res.data
      addMarker1(markerDataRes, AMapRef.value)
      // addMarker(markerDataRes, AMapRef.value)
    }
  })
}
// 选择框点击时间
const selectChangeFn = val => {
  getCoordinatePointFn(val)
}
</script>
<style lang="less" scoped>
#container {
  width: 100%;
  height: 100%;
  position: relative;
  .select {
    margin: 10px;
    position: absolute;
    z-index: 100000;
  }
}
</style>